<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <label for="sel"></label>
        <select id="sel" style="margin:10px;padding:6px;border-radius: 15px;">
        <option value="./images/pngs/1.png">图片一
        <option value="./images/pngs/2.png">图片二
        <option value="./images/pngs/3.png">图片三
        <option value="./images/pngs/4.png">图片四
    </select>
    <br>
    <img id='pic' src="./images/pngs/1.png" style="margin-left: 270px;width: 1000px; height: 640px" alt="">
    <script type="text/javascript">
        //下拉框更改图片
        let sel = document.getElementById('sel');
        let pic = document.getElementById('pic');
        sel.addEventListener('change', function () {
            pic.src = this.value;
        }, false);
    </script>
</body>
</html>
